<template>
  <div style="margin: 20px; margin-top: 60px;">
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="auto"
      >
        <el-form-item :label="t('searchbar.wellName')" prop="p4">
          <el-input
            v-model="queryParams.p4"
            :placeholder="t('searchbar.wellNameInfo')"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>




        <el-form-item :label="t('form.startwellDepth')" prop="startwelldepth">
          <el-input
            v-model="welldepth.startwelldepth"
            :placeholder="t('form.inputStartWell')"
            clearable
            @keyup.enter="handleQuery"
            @input="updateWellDepth"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item :label="t('form.endwelldepth')" prop="endwelldepth">
          <el-input
            v-model="welldepth.endwelldepth"
            :placeholder="t('form.inputEndWell')"
            clearable
            @keyup.enter="handleQuery"
            @input="updateWellDepth"
            class="!w-240px"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleQuery"
            ><Icon icon="ep:search" class="mr-5px" /> {{ t('action.search') }}</el-button
          >
          <el-button @click="resetQuery"
            ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('action.reset') }}</el-button
          >
          <!--        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['base:mwmeter:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['base:mwmeter:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>-->
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
        v-loading="loading"
        :data="visibleItems"
        :stripe="true"
        :show-overflow-tooltip="true"
        style="width: 100%"
        @mouseenter="stopScroll"
        @mouseleave="startScroll"
      >
        <!--      <el-table-column label="父表ID" align="center" prop="parentId" />-->
<!--        <el-table-column :label="t('searchbar.codeLabel')" align="center" prop="code" />-->
<!--        <el-table-column :label="t('searchbar.type')" align="center" prop="deviceType">
          <template #default="scope">
            <dict-tag :type="DICT_TYPE.YQ_TYPE" :value="scope.row.deviceType" />
          </template>
        </el-table-column>
        <el-table-column :label="t('searchbar.model')" align="center" prop="deviceMode">
          <template #default="scope">
            <dict-tag :type="getDictType(scope.row.deviceType)" :value="scope.row.deviceMode" />
          </template>
        </el-table-column>
        <el-table-column :label="t('searchbar.WellName')" align="center" prop="p4" />-->

        <el-table-column :label="t('searchbar.wellDepth')" align="center">
          <template #default="scope">
            {{ Math.round(scope.row.p5) }}
          </template>
        </el-table-column>
        <el-table-column :label="t('searchbar.dateWellDepth')" align="center" prop="p6" />
        <el-table-column :label="t('searchbar.BITposition')" align="center" prop="p97" />
        <el-table-column :label="t('searchbar.Verticalwelldepth')" align="center" prop="p79" />
        <el-table-column :label="t('searchbar.hookHeight')" align="center" prop="p7" />
        <el-table-column :label="t('searchbar.hookLoad')" align="center" prop="p12" />
        <el-table-column :label="t('searchbar.press')" align="center" prop="p13" />
        <el-table-column :label="t('searchbar.torque')" align="center" prop="p15" />
        <el-table-column :label="t('searchbar.clamptorque')" align="center" prop="p16" />
        <el-table-column :label="t('searchbar.Standpipepressure')" align="center" prop="p17" />
        <el-table-column :label="t('searchbar.casingpressure')" align="center" prop="p18" />
        <el-table-column :label="t('searchbar.Pumpflushing1')" align="center" prop="p19" />
        <el-table-column :label="t('searchbar.Pumpflushing2')" align="center" prop="p20" />
        <el-table-column :label="t('searchbar.Pumpflushing3')" align="center" prop="p21" />
        <el-table-column :label="t('searchbar.Inletflow')" align="center" prop="p22" />
        <el-table-column :label="t('searchbar.exportflow')" align="center" prop="p23" />
        <el-table-column :label="t('searchbar.Entrancedensity')" align="center" prop="p24" />
        <el-table-column :label="t('searchbar.Exportdensity')" align="center" prop="p25" />
        <el-table-column :label="t('searchbar.Inlettemperature')" align="center" prop="p26" />
        <el-table-column :label="t('searchbar.exporttemperature')" align="center" prop="p27" />
        <el-table-column :label="t('searchbar.Entranceconductivity')" align="center" prop="p28" />
        <el-table-column :label="t('searchbar.exportconductivity')" align="center" prop="p29" />





        <el-table-column :label="t('searchbar.rotaryspeed')" align="center" prop="p14" />
        <el-table-column :label="t('searchbar.footage')" align="center" prop="p11" />
        <el-table-column :label="t('searchbar.dateTime')" align="center" width="180px">
          <template #default="scope"> {{ scope.row.p1 }} {{ scope.row.p2 }} </template>
        </el-table-column>
        <el-table-column :label="t('setting.logo')" align="center" prop="p3" />
        <el-table-column :label="t('searchbar.downTime')" align="center" prop="p8" />
        <el-table-column :label="t('searchbar.actuallateTime')" align="center" prop="p9" />
        <el-table-column :label="t('searchbar.ricedrill')" align="center" prop="p10" />

        <el-table-column :label="t('searchbar.cellvolume1')" align="center" prop="p30" />
        <el-table-column :label="t('searchbar.cellvolume2')" align="center" prop="p31" />
        <el-table-column :label="t('searchbar.cellvolume3')" align="center" prop="p32" />
        <el-table-column :label="t('searchbar.cellvolume4')" align="center" prop="p33" />
        <el-table-column :label="t('searchbar.cellvolume5')" align="center" prop="p34" />
        <el-table-column :label="t('searchbar.cellvolume6')" align="center" prop="p35" />
        <el-table-column :label="t('searchbar.drillingtank')" align="center" prop="p36" />
        <el-table-column :label="t('searchbar.Totalpool')" align="center" prop="p37" />
        <el-table-column :label="t('searchbar.Pooloverflow')" align="center" prop="p38" />
        <el-table-column :label="t('searchbar.totalhydrocarbon')" align="center" prop="p39" />
        <el-table-column label="C1" align="center" prop="p40" />
        <el-table-column label="C2" align="center" prop="p41" />
        <el-table-column label="C3" align="center" prop="p42" />
        <el-table-column label="iC4" align="center" prop="p43" />
        <el-table-column label="nC4" align="center" prop="p44" />
        <el-table-column label="iC5" align="center" prop="p45" />
        <el-table-column label="nC5" align="center" prop="p46" />
        <el-table-column label="H2" align="center" prop="p47" />
        <el-table-column label="CO2" align="center" prop="p48" />
        <el-table-column label="He" align="center" prop="p49" />
        <el-table-column label="Dc" align="center" prop="p50" />
        <el-table-column label="Sigma" align="center" prop="p51" />
        <el-table-column :label="t('searchbar.equivalentdensity')" align="center" prop="p52" />
        <el-table-column :label="t('searchbar.Puredrillingtime')" align="center" prop="p53" />
        <el-table-column :label="t('searchbar.cost')" align="center" prop="p54" />
        <el-table-column :label="t('searchbar.bottomwell')" align="center" prop="p55" />
        <el-table-column :label="t('searchbar.Kellyin')" align="center" prop="p56" />
        <el-table-column :label="t('searchbar.Kellyup')" align="center" prop="p57" />
        <el-table-column :label="t('searchbar.Drilllength')" align="center" prop="p58" />
        <el-table-column :label="t('searchbar.Drillweight')" align="center" prop="p59" />
        <el-table-column :label="t('searchbar.drillpipe')" align="center" prop="p60" />
        <el-table-column :label="t('searchbar.pillar')" align="center" prop="p61" />
        <el-table-column :label="t('searchbar.Winchcounting')" align="center" prop="p62" />
        <el-table-column :label="t('searchbar.Totalpump')" align="center" prop="p63" />
        <el-table-column :label="t('searchbar.Totalrevolutions')" align="center" prop="p64" />
        <el-table-column :label="t('searchbar.Infraredcarbondioxide')" align="center" prop="p65" />
        <el-table-column :label="t('searchbar.hydrogensulfide1')" align="center" prop="p66" />
        <el-table-column :label="t('searchbar.hydrogensulfide2')" align="center" prop="p67" />
        <el-table-column :label="t('searchbar.hydrogensulfide3')" align="center" prop="p68" />
        <el-table-column :label="t('searchbar.hydrogensulfide4')" align="center" prop="p69" />
        <el-table-column :label="t('searchbar.hydrogensulfide5')" align="center" prop="p70" />
        <el-table-column :label="t('searchbar.Seawave')" align="center" prop="p71" />
        <el-table-column :label="t('searchbar.Drillingstatus')" align="center" prop="p72" />
        <el-table-column :label="t('searchbar.cellvolume7')" align="center" prop="p73" />
        <el-table-column :label="t('searchbar.cellvolume8')" align="center" prop="p74" />
        <el-table-column :label="t('searchbar.cellvolume9')" align="center" prop="p75" />
        <el-table-column :label="t('searchbar.cellvolume10')" align="center" prop="p76" />
        <el-table-column :label="t('searchbar.cellvolume11')" align="center" prop="p77" />
        <el-table-column :label="t('searchbar.cellvolume12')" align="center" prop="p78" />
        <el-table-column
          :label="t('searchbar.Verticaldrillingposition')"
          align="center"
          prop="p80"
        />
        <el-table-column :label="t('searchbar.Wellinclinationangle')" align="center" prop="p81" />
        <el-table-column
          :label="t('searchbar.Drillinginclinationangle')"
          align="center"
          prop="p82"
        />
        <el-table-column :label="t('searchbar.azimuthangle')" align="center" prop="p83" />
        <el-table-column
          :label="t('searchbar.Drillingpositionazimuthangle')"
          align="center"
          prop="p84"
        />
        <el-table-column :label="t('searchbar.horizontaldisplacement')" align="center" prop="p85" />
        <el-table-column :label="t('searchbar.closureazimuth')" align="center" prop="p86" />
        <el-table-column :label="t('searchbar.Drillbitserialnumber')" align="center" prop="p87" />
        <el-table-column :label="t('searchbar.Drilltype')" align="center" prop="p88" />
        <el-table-column :label="t('searchbar.Bitsize')" align="center" prop="p89" />
        <el-table-column :label="t('searchbar.Drillcost')" align="center" prop="p90" />
        <el-table-column :label="t('searchbar.DrillbitIADC')" align="center" prop="p91" />
        <el-table-column :label="t('searchbar.hydrophthalmia1')" align="center" prop="p92" />
        <el-table-column :label="t('searchbar.hydrophthalmia2')" align="center" prop="p93" />
        <el-table-column :label="t('searchbar.hydrophthalmia3')" align="center" prop="p94" />
        <el-table-column :label="t('searchbar.Drillarea')" align="center" prop="p95" />
        <el-table-column :label="t('searchbar.Bearingcoefficient')" align="center" prop="p96" />

        <el-table-column :label="t('searchbar.Teethgrinding')" align="center" prop="p98" />
        <el-table-column :label="t('searchbar.Axisgrinding')" align="center" prop="p99" />
        <el-table-column :label="t('searchbar.Gasrate')" align="center" prop="p100" />
        <el-table-column :label="t('searchbar.Gasoutletflowrate')" align="center" prop="p101" />
        <el-table-column :label="t('searchbar.Gasinlettemperature')" align="center" prop="p102" />
        <el-table-column :label="t('searchbar.Gasoutputtemperature')" align="center" prop="p103" />
        <el-table-column :label="t('searchbar.Gasinletpressure')" align="center" prop="p104" />
        <el-table-column :label="t('searchbar.Gasoutletpressure')" align="center" prop="p105" />
        <el-table-column :label="t('searchbar.Gasoutlethumidity')" align="center" prop="p106" />
        <el-table-column :label="t('searchbar.Annularpressuredrop')" align="center" prop="p107" />
        <el-table-column
          :label="t('searchbar.Drillstringpressuredrop')"
          align="center"
          prop="p108"
        />
        <el-table-column :label="t('searchbar.Drillbitpressuredrop')" align="center" prop="p109" />
        <el-table-column
          :label="t('searchbar.Groundpressureconsumption')"
          align="center"
          prop="p110"
        />
        <el-table-column :label="t('searchbar.Waterhorsepower')" align="center" prop="p111" />
        <el-table-column :label="t('searchbar.impactforce')" align="center" prop="p112" />
        <el-table-column
          :label="t('searchbar.hydrophthalmiaSprayspeed')"
          align="center"
          prop="p113"
        />
        <el-table-column :label="t('searchbar.hydraulicefficiency')" align="center" prop="p114" />
        <el-table-column :label="t('searchbar.Auxiliaryrate')" align="center" prop="p115" />
        <el-table-column :label="t('searchbar.Gasmonoxide')" align="center" prop="p116" />
        <el-table-column :label="t('searchbar.gasflow')" align="center" prop="p117" />
        <el-table-column :label="t('searchbar.Gasdelayedwell')" align="center" prop="p118" />
        <el-table-column :label="t('searchbar.Latewelldepth')" align="center" prop="p119" />
        <el-table-column :label="t('searchbar.language')" align="center" prop="p120" />
        <!-- <el-table-column label="参数121" align="center" prop="p121" />
        <el-table-column label="参数122" align="center" prop="p122" />
        <el-table-column label="参数123" align="center" prop="p123" />
        <el-table-column label="参数124" align="center" prop="p124" /> -->
        <el-table-column :label="t('searchbar.remark')" align="center" prop="remark" />
        <el-table-column
          :label="t('common.createTime')"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180px"
        />
        <!--      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['base:mwmeter:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['base:mwmeter:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>-->
      </el-table>
      <!-- 分页 -->
      <!--    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />-->
    </ContentWrap>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <mwmeterForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { mwmeterApi, mwmeterVO } from '@/api/search/rtdata/mwmeter'
import mwmeterForm from './mwmeterForm.vue'
import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";
import {ElFormItem} from "element-plus";
import {WITS8Api} from "@/api/search/loggdata/wits8";

/** 实测整米数据 列表 */
defineOptions({ name: 'Mwmeter' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const list = ref<mwmeterVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  /*pageNo: 1,
  pageSize: 10,*/
  p5: [],
  p4:undefined,
  deviceType:undefined,
  deviceMode:undefined,
})
const welldepth = reactive({
  startwelldepth: undefined,
  endwelldepth: undefined
})
const visibleItems = ref([]) // 初始显示5条数据
let scrollInterval = null
let currentIndex = 0 // 当前显示数据的起始索引
const updateWellDepth = () => {
  queryParams.p5 = [welldepth.startwelldepth, welldepth.endwelldepth]
}

const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await mwmeterApi.getMWMeterByWellDepth(queryParams)
    list.value = data.data
    total.value = data.total
    visibleItems.value = list.value.slice(0, 15)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  welldepth.startwelldepth = undefined
  welldepth.endwelldepth = undefined
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await mwmeterApi.deletemwmeter(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await mwmeterApi.exportmwmeter(queryParams)
    download.excel(data, '实测整米数据.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
  startScroll()
})
const scrollTable = async() => {
  /*const data = await mwmeterApi.getNewOne({})
  list.value.push(data)*/
  if (list.value.length - currentIndex <= 15) {
    // 如果数据显示到最后5条数据时停止滚动
    stopScroll()
    addData()
    return
  }
  // 滚动逻辑：将当前显示的数据下移一行
  visibleItems.value = list.value.slice(currentIndex + 1, currentIndex + 16)
  currentIndex++
}

const startScroll = () => {
  scrollInterval = setInterval(scrollTable, 2000)
}

const stopScroll = () => {
  clearInterval(scrollInterval)
}
/*const handleMouseWheel = () => {
  visibleItems.value = list.value
}*/

onUnmounted(() => {
  stopScroll()
})

// // 添加新数据的方法
const addData = async()=>{
  // list.value.push({name:'数据99'})
  // if(visibleItems.value.length<5){
  //   visibleItems.value.push({name:'数据99'})
  //   startScroll()
  // }
  const data = await mwmeterApi.getNewOne({})
  list.value.push(data)
  if(visibleItems.value.length<15){
    visibleItems.value.push(data)
    startScroll()
  }
  if (list.value.length > 15) {
    // 如果数据超过5条，继续滚动
    startScroll()
  }
}



</script>
